<template>
  <div class="my-tab-bar">

    <div class="tab-item" v-for="(item,index) in tabs" :class="{current:ind===index}" @click="btn(index)" :key="index">
      <!-- 图标 -->
      <span class="iconfont" :class="item.iconText"></span>
      <!-- 文字 -->
      <span>{{item.text}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        ind: 0
      }
    },
    props: {
      tabs: {
        type: Array,

        required: true,
        validator(val) {
          if (val.length > 2 && val.length <= 5) {
            return true
          } else {
            console.error('tabs 长度必须是2-5个对象')
          }
        }

      }
    },
    methods: {
      btn(index) {
        this.ind = index
        this.$emit('cuan', index)
      }
    }

  }
</script>

<style lang="less" scoped>
  .my-tab-bar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    border-top: 1px solid #ccc;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: white;

    .tab-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }

  .current {
    color: pink;
  }
</style>